<template>
  <div class="app-container order-manage">
    <!-- 搜索 -->
    <el-form :model="state.queryParams" ref="queryRef" :inline="true">
      <el-form-item label="订单名称" prop="ordername">
        <el-input v-model="state.queryParams.ordername" placeholder="订单名称" clearable @keyup.enter="handleQuery({initPageIndex: true})" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery({initPageIndex: true})">搜索</el-button>
        <el-button type="primary" icon="Plus" plain @click="orderEditRef.openDialog()">新增</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table v-loading="state.tableLoading" :data="state.tableData" row-key="id" style="flex: 1">
      <el-table-column prop="orderid" label="订单流水号" min-width="100"></el-table-column>
      <el-table-column prop="orderproductid" label="关联产品id" min-width="100"></el-table-column>
      <el-table-column prop="ordername" label="订单名称" min-width="100"></el-table-column>
      <el-table-column prop="orderproductnum" label="产品数量" min-width="100" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="orderprice" label="产品金额" min-width="100"></el-table-column>
      <el-table-column prop="orderzffs" label="支付方式" min-width="100"></el-table-column>
      <el-table-column prop="orderstatus" label="支付状态" min-width="100"></el-table-column>
      <el-table-column prop="orderreturnid" label="远程交易流水号" min-width="100"></el-table-column>
      <el-table-column prop="orderreturndate" label="远程交易返回时间" min-width="100"></el-table-column>
      <el-table-column prop="ordercreatedate" label="订单创建时间" min-width="100"></el-table-column>
      <el-table-column prop="orderaccountid" label="订单创建人" min-width="100"></el-table-column>
      <el-table-column label="操作" :width="fitWidth" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <div class="operation-box">
            <el-text class="operate-btn-item" type="primary" @click="orderEditRef.openDialog(scope.row)">编辑</el-text>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paginaionConfig.query.pageindex"
        :page-sizes="paginaionConfig.sizeOptions"
        :page-size="paginaionConfig.query.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paginaionConfig.total"
      >
      </el-pagination>
    </div>

    <OrderEdit width="50%" ref="orderEditRef" @refresh="handleQuery" />
  </div>
</template>

<script setup name="Order">
import useOrderManageStore from '@store/modules/orderManage'
import OrderEdit from './components/OrderEdit/index.vue'
import _ from 'lodash'
import usePagination from '@/hooks/usePagination'
import useFitColumn from '@/hooks/useFitColumn'

const {proxy} = getCurrentInstance()
const orderManageStore = useOrderManageStore()
const {paginaionConfig, handleSizeChange, handleCurrentChange} = usePagination(handleQuery)
const {fitWidth} = useFitColumn()

const state = reactive({
  tableLoading: false,
  tableData: [],
  queryParams: {
    ordername: ''
  }
})
const orderEditRef = ref(null)

/** 查询菜单列表 */
const getList = async (query) => {
  console.log(query, 'query')
  state.tableLoading = true
  const {Total, Data} = await orderManageStore.list(query)
  paginaionConfig.total = Total
  state.tableData = Data

  state.tableLoading = false
}

function handleQuery(config) {
  if (config?.initPageIndex) paginaionConfig.query.pageindex = 1
  getList(Object.assign(_.cloneDeep(paginaionConfig.query), state.queryParams))
}

onMounted(() => {
  handleQuery({initPageIndex: true})
})
</script>
